<template>
  <div class="row">
    <el-container>
      <el-main class="bg-white">
        <div class="form-group text-right">
          <input
            type="email"
            class="form-control"
            aria-describedby="emailHelp"
            placeholder="备注"
            v-model="content"
          />
          <br />
          <el-button type="primary" @click="createreply()" round>评论</el-button>
        </div>
        <!-- 评论 -->
        <el-container class="row border-bottom pinglun" v-for="(v, i) in pageTableData" :key="i">
          <el-main style="padding: 5px;">
            <h5>
              <p v-text="v.username"></p>
            </h5>
            <p class="text-lowercase" v-text="v.content"></p>
            <p
              class="text-lowercase"
              v-text="new Date(v.createdAt).getFullYear()+'-'+(new Date(v.createdAt).getMonth()+1)+'-'+new Date(v.createdAt).getDate()+'-'+new Date(v.createdAt).getHours() + ':' +new Date(v.createdAt).getMinutes() + ':' +new Date(v.createdAt).getSeconds()"
            ></p>
          </el-main>
        </el-container>
        <el-pagination
          small
          v-show="this.replys.length>5"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5]"
          :page-size="5"
          layout="total, sizes, prev, pager, next, jumper"
          :total="this.replys.length"
        ></el-pagination>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import {
  asynccreateremaproposal,
  asyncgetanswerinremap
} from "../../../plugins/api.js";
import { mapGetters } from "vuex";
export default {
  props: ["userID", "username"],
  data() {
    return {
      item: {},
      html: "",
      content: "",
      replys: [],
      isoffline: "",
      index: [],
      currentPage: 1,
      pagesize: 20
    };
  },

  watch: {
    userID(newValue) {
      if (newValue) {
        this.start();
        this.userID = newValue;
      }
    },

    async $route() {
      this.start();
    },
    currentPage(v) {
      console.log(v);
    },
    pagesize(v) {
      console.log(v);
    }
  },
  computed: {
    ...mapGetters(["getuser"]),
    pageTableData() {
      let pages = Math.ceil(this.replys.length / 5); //12为每页设置数量
      let newList = [];
      for (let i = 0; i < pages; i++) {
        let sonList = [];
        sonList = this.replys.slice(i * 5, i * 5 + 5); //12为每页设置数量
        newList.push(sonList);
      }
      return newList[this.currentPage - 1];
    }
  },

  async mounted() {
    await this.start();
  },
  methods: {
    handleSizeChange(val) {
      this.pagesize = val;
      console.log(123);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    async start() {
      const data = await asyncgetanswerinremap({ userID: this.userID });
      const arr = [];
      for (let v of data) {
        arr.push(v);
      }
      this.replys = arr;
    },
    async createreply(replyid) {
      if (this.content) {
        console.log(replyid);
        await asynccreateremaproposal({
          uid: this.getuser.userid,
          username: this.getuser.username,
          content: this.content,
          userID: this.userID
        });
        this.content = "";
        this.start();
      } else {
        this.$message.error("评论不能为空");
      }
    }
  }
};
</script>

<style scoped>
.el-main {
  overflow: none !important;
}
.el-header {
  padding: 0 15px !important;
}
.data-iv {
  margin-right: -5px;
}
.text-success {
  color: red !important;
}
button:focus {
  outline: 0px;
  outline: 0px;
}
.el-button--success {
  background: red;
  border: 1px solid red;
}
.cl-top {
  height: 49px;
  line-height: 49px;
}
.cl-top h3 {
  height: 49px;
}
.authorImg {
  margin-right: 8px;
  border-radius: 20px;
  width: 20px;
  height: 20px;
}
.iframe {
  margin-bottom: 40px;
}
.likes {
  padding: 40px;
  text-align: right;
}
.pinglun {
  margin-top: 15px;
}
.text-right .icon {
  margin-left: 25px;
  margin-right: 25px;
  cursor: pointer;
}
</style>